<script setup>
    import { ElMessage, ElMessageBox } from 'element-plus'
    import { onMounted,ref ,reactive} from 'vue';
    import api from '../api'
    import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
    const tableData = ref([]);
onMounted(async ()=>{
    checkData();

})
//编辑
const editObj = ref({});
let dialogFormEdiit = ref(false);
//编辑车辆信息弹出
const openEdit =  (row)=>{
  //将数据存储到editObj上面
  editObj.value.id = row.id;
  editObj.value.name = row.name;
  editObj.value.sex = row.sex;
  editObj.value.username = row.username;
  editObj.value.password = row.password;
//打开
  dialogFormEdiit.value = true;
}
//保存修改后的数据
const saveEdit = async ()=>{
    let result = await api.edit("api/user/edit" , editObj.value);
    console.log(result);
    dialogFormEdiit.value = false;
    if(result.code == 200){
      checkData();
          ElMessage({
        type: 'success',
        message: '普天同庆 修改成功！',
      })
    }else{
      ElMessage({
        type: 'info',
        message: '不好意思 更新失败~',
      })
    }
    
  }
//定义存储搜索数据的变量
const checkObj = ref({
  page:1,
  size:6
});
//定义搜索数据的方法
const checkData = async (val)=>{
  if(typeof val == 'number'){
    checkObj.value.page = val;
  }
      //查询数据
      console.log(checkObj.value);//检查是否传入数据
      let result = await api.get("/api/user/select" , checkObj.value);
      // result {code , data , message}   data->{list , count}
      //更新页面数据
      tableData.value = result.data.list;
      total.value = result.data.count;
}
const total = ref(90);
//删除确认框 start
const open = (data) => {
  ElMessageBox.confirm(
    '你真的要删除这个业务员信息吗？！',
    {
      confirmButtonText: '确定',
      cancelButtonText: '我后悔了',
      type: 'warning',
    }
  )
    .then( async () => {
      console.log(data);
        let result = await api.del("/api/user/del/" , data);
        if(result.code == 200){
         checkData();
          ElMessage({
        type: 'success',
        message: '错误的决定 删除成功了',
      })
    }else{
      ElMessage({
        type: 'info',
        message: '嘿嘿 删除失败',
      })
    }
        })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '正确的决定！！！',
      })
    })
}

//删除确认框  end
const addObj = ref({
    name:'',
    sex:'',
   username:'',
   password:''
})
//保存新添加的用户信息
const addSave = async ()=>{
  let result = await api.add("/api/user/add",addObj.value);
  if(result.code == 200){
          checkData();
          ElMessage({
        type: 'success',
        message: '666 又来了个新用户',
      })
    }else{
      ElMessage({
        type: 'info',
        message: '可惜！',
      })
    }
    dialogFormVisible.value = false;
    
    
}
const openadd = ()=>{
addObj.value = {};
  dialogFormVisible.value = true;
}
var dialogFormVisible = ref(false);
//添加新用户的操作
</script>


<template>
   <div style="display: flex; align-items: center;">
    <el-button type="info" plain @click = "checkData">搜索</el-button>
    <el-form :model="checkObj">
    <el-input v-model="checkObj.name" style="width: 240px" placeholder="请输入用户的姓名部分" />
    <el-button plain @click="openadd" type="primary" round >添加新用户</el-button>
  </el-form>
</div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="id" label="编号" />
      <el-table-column prop="username" label="用户名" />
      <!-- <el-table-column prop="password" label="密码" /> -->
      <el-table-column prop="name" label="名字" />
      <el-table-column prop="sex" label="性别" />
      <el-table-column  label="操作"width="120">
        <template #default = "scope">
        <el-button plain @click="openEdit(scope.row)" type="primary" :icon="Edit" circle disabled />
        <el-button plain @click="open(scope.row.id)" type="danger" :icon="Delete" circle disabled/>
    </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
  :page-size = "checkObj.size"
  :current-page = "checkObj.page"
   background layout="prev, pager, next" :total="total" @current-change="checkData" />
   <!--分页-->
    <!--编辑弹出框-->
    <el-dialog v-model="dialogFormEdiit" title="编辑用户信息" width="500">
    <el-form :model="editObj">
      <el-form-item label=" 编号：" :label-width="formLabelWidth">
        <el-input v-model="editObj.id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="用户名：" :label-width="formLabelWidth">
        <el-input v-model="editObj.username" autocomplete="off" />
      </el-form-item>
      <!-- <el-form-item label="密码：" :label-width="formLabelWidth">
        <el-input v-model="editObj.password" autocomplete="off" />
      </el-form-item> -->
      <el-form-item label="姓名：" :label-width="formLabelWidth">
        <el-input v-model="editObj.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别：" :label-width="formLabelWidth">
        <el-input v-model="editObj.sex" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormEdiit = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
    <!--编辑弹出框-->
 <!--添加新用户的弹出框-->
 <el-dialog v-model="dialogFormVisible" title="添加用户信息" width="500">
    <el-form :model="addObj">
      <el-form-item label="用户名：" :label-width="formLabelWidth">
        <el-input v-model="addObj.username" autocomplete="off" />
      </el-form-item>
      <!-- <el-form-item label="密码：" :label-width="formLabelWidth">
        <el-input v-model="addObj.password" autocomplete="off" />
      </el-form-item> -->
      <el-form-item label="姓名：" :label-width="formLabelWidth">
        <el-input v-model="addObj.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别：" :label-width="formLabelWidth">
        <el-input v-model="addObj.sex" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addSave">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
    <!--添加新用户的弹出框-->
  </template>
  
  
  
  <style>
  .el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
  }
  .el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
  }
  .el-table {
    --el-table-border-color: transparent;
    --el-table-border: none;
    --el-table-text-color: #000000;
    --el-table-header-text-color: #0b0b0b;
    --el-table-row-hover-bg-color: transparent;
    --el-table-current-row-bg-color: transparent;
    --el-table-header-bg-color: transparent;
    --el-table-bg-color: transparent;
    --el-table-tr-bg-color: transparent;
    --el-table-expanded-cell-bg-color: transparent;
}
  </style>